<template>
	<div class="signin-container" v-loading="sLoading">
		<!-- 签到头部区域 -->
		<div class="signin-header" :style="headerBgStyle">
			<!-- 金币飘落动画 -->
			<div class="coin-animation">
				<div class="coin" v-for="i in 8" :key="i" :style="{ animationDelay: `${i * 0.2}s` }"></div>
			</div>

			<div class="signin-reminder" :style="{ color: textColor }">
				签到提醒
				<span class="toggle-switch">
					<input type="checkbox" id="reminder-switch">
					<label for="reminder-switch"></label>
				</span>
			</div>
			<div class="signin-status" :style="{ color: textColor }">
				今日未签到<br>
				已连续签到11天
			</div>
			<div class="signin-rules" :style="{ color: textColor }">
				签到规则
			</div>

			<div class="signin-button-container">
				<div class="signin-button" :style="buttonStyle" @click="handleSignIn">
					<span class="button-text">点我</span>
					<span class="button-text">签到</span>
				</div>
			</div>
		</div>

		<!-- 奖励列表区域 -->
		<div class="rewards-section" :style="rewardsBgStyle">
			<div class="reward-item">
				<div class="reward-icon">
					<img v-if="hasImage('img_hb')" :src="getImageUrl('img_hb')" alt="红包">
					<div v-else class="default-icon red-packet">¥</div>
				</div>
				<div class="reward-info">
					<div class="reward-title">连续签到3天</div>
					<div class="reward-desc">赠送20现金</div>
				</div>
				<div class="reward-status received" :style="receivedStyle">
					已领取
				</div>
			</div>

			<div class="reward-item">
				<div class="reward-icon">
					<img v-if="hasImage('img_jf')" :src="getImageUrl('img_jf')" alt="积分">
					<div v-else class="default-icon points">★</div>
				</div>
				<div class="reward-info">
					<div class="reward-title">连续签到5天</div>
					<div class="reward-desc">赠送30积分</div>
				</div>
				<div class="reward-status not-received" :style="notReceivedStyle">
					未领取
				</div>
			</div>

			<div class="reward-item">
				<div class="reward-icon">
					<img v-if="hasImage('img_jf')" :src="getImageUrl('img_jf')" alt="积分">
					<div v-else class="default-icon points">★</div>
				</div>
				<div class="reward-info">
					<div class="reward-title">累计签到5天</div>
					<div class="reward-desc">赠送25积分</div>
				</div>
				<div class="reward-status not-received" :style="notReceivedStyle">
					未领取
				</div>
			</div>
		</div>

		<!-- 日历区域 -->
		<div class="calendar-section">
			<div class="calendar-header">
				<span class="nav-arrow">&lt;</span>
				<span class="month-year">2025年8月</span>
				<span class="nav-arrow">&gt;</span>
			</div>

			<div class="calendar-weekdays">
				<div class="weekday">日</div>
				<div class="weekday">一</div>
				<div class="weekday">二</div>
				<div class="weekday">三</div>
				<div class="weekday">四</div>
				<div class="weekday">五</div>
				<div class="weekday">六</div>
			</div>

			<div class="calendar-dates">
				<div class="date-row">
					<div class="date-cell"></div>
					<div class="date-cell"></div>
					<div class="date-cell"></div>
					<div class="date-cell"></div>
					<div class="date-cell">1</div>
					<div class="date-cell">2</div>
					<div class="date-cell">3</div>
				</div>
				<div class="date-row">
					<div class="date-cell">4</div>
					<div class="date-cell">5</div>
					<div class="date-cell">6</div>
					<div class="date-cell">7</div>
					<div class="date-cell">8</div>
					<div class="date-cell">9</div>
					<div class="date-cell">10</div>
				</div>
				<div class="date-row">
					<div class="date-cell signed" :style="signedDateStyle">10</div>
					<div class="date-cell signed" :style="signedDateStyle">11</div>
					<div class="date-cell signed" :style="signedDateStyle">12</div>
					<div class="date-cell">13</div>
					<div class="date-cell">14</div>
					<div class="date-cell">15</div>
					<div class="date-cell">16</div>
				</div>
				<div class="date-row">
					<div class="date-cell">17</div>
					<div class="date-cell">18</div>
					<div class="date-cell">19</div>
					<div class="date-cell">20</div>
					<div class="date-cell">21</div>
					<div class="date-cell">22</div>
					<div class="date-cell">23</div>
				</div>
				<div class="date-row">
					<div class="date-cell">24</div>
					<div class="date-cell">25</div>
					<div class="date-cell">26</div>
					<div class="date-cell">27</div>
					<div class="date-cell">28</div>
					<div class="date-cell">29</div>
					<div class="date-cell">30</div>
				</div>
				<div class="date-row">
					<div class="date-cell">31</div>
					<div class="date-cell"></div>
					<div class="date-cell"></div>
					<div class="date-cell"></div>
					<div class="date-cell"></div>
					<div class="date-cell"></div>
					<div class="date-cell"></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import {
	ref,
	onMounted,
	defineProps,
	defineEmits,
	getCurrentInstance,
	computed
} from '@vue/composition-api'
// 获取当前组件实例
const {
	proxy
} = getCurrentInstance()

const props = defineProps({
	initData: {
		type: Object,
		default: () => ({}),
	},
})

const emit = defineEmits(['editStopTpBmFun'])
const sLoading = ref(false)

// 计算属性 - 处理样式
const headerBgStyle = computed(() => {
	// 使用 back_c1 而不是 bg_c_nlg，与 objectForm 中的属性对应
	return {
		backgroundColor: `#${props.initData.back_c1 || 'ff6b00'}`,
		backgroundImage: 'linear-gradient(135deg, #ff6b00 0%, #ff9a3c 100%)',
	}
})

const textColor = computed(() => {
	return `#${props.initData.font_c_tx || 'ffffff'}`
})

const buttonStyle = computed(() => {
	return {
		backgroundColor: `#${props.initData.btn_c_nlg || 'ffcc00'}`,
		backgroundImage: 'linear-gradient(135deg, #ffcc00 0%, #ff9a3c 100%)',
		color: `#${props.initData.font_c_nlg || 'ffffff'}`
	}
})

const receivedStyle = computed(() => {
	return {
		backgroundColor: `#${props.initData.btn_c_lq || 'cccccc'}`,
		color: `#${props.initData.font_c_lq || 'ffffff'}`
	}
})

const notReceivedStyle = computed(() => {
	return {
		backgroundColor: `#${props.initData.btn_c_nlg || 'ff6b00'}`,
		color: `#${props.initData.font_c_nlg || 'ffffff'}`
	}
})

const signedDateStyle = computed(() => {
	return {
		backgroundColor: `#${props.initData.btn_c_nlg || 'ff6b00'}`,
		color: `#${props.initData.font_c_nlg || 'ffffff'}`
	}
})

const rewardsBgStyle = computed(() => {
	const backC1 = props.initData.back_c1 || 'ffffff';
	const backC2 = props.initData.back_c2 || '';

	if (backC2) {
		return {
			background: `linear-gradient(to bottom, #${backC1}, #${backC2})`
		};
	} else {
		return {
			backgroundColor: `#${backC1}`
		};
	}
})

// 辅助方法 - 检查图片是否存在
const hasImage = (key) => {
	return props.initData[key] && props.initData[key][0] && props.initData[key][0].url
}

// 辅助方法 - 获取图片URL
const getImageUrl = (key) => {
	return hasImage(key) ? props.initData[key][0].url : ''
}

// 签到处理方法
const handleSignIn = () => {
	// 实现签到逻辑
	proxy.$message.success('签到成功')
}

onMounted(() => { })

defineExpose({})
</script>

<style lang="scss" scoped>
.signin-container {
	width: 100%;
	height: 100%;
	font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
	overflow: hidden;
}

.signin-header {
	padding: 20px 15px;
	text-align: center;
	position: relative;
	overflow: hidden;
	min-height: 300px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* 金币动画 */
.coin-animation {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.coin {
	position: absolute;
	width: 24px;
	height: 24px;
	background-image: url('');
	background-size: contain;
	animation: fall 3s linear infinite;
	opacity: 0.8;
}

@keyframes fall {
	0% {
		transform: translateY(-50px) rotate(0deg);
		opacity: 0;
	}

	10% {
		opacity: 1;
	}

	90% {
		opacity: 1;
	}

	100% {
		transform: translateY(300px) rotate(360deg);
		opacity: 0;
	}
}

.signin-reminder {
	position: absolute;
	top: 15px;
	left: 15px;
	font-size: 14px;
	display: flex;
	align-items: center;
}

/* 开关样式 */
.toggle-switch {
	margin-left: 10px;
	position: relative;
	display: inline-block;
	width: 40px;
	height: 20px;
}

.toggle-switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.toggle-switch label {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(255, 255, 255, 0.3);
	transition: .4s;
	border-radius: 20px;
}

.toggle-switch label:before {
	position: absolute;
	content: "";
	height: 16px;
	width: 16px;
	left: 2px;
	bottom: 2px;
	background-color: white;
	transition: .4s;
	border-radius: 50%;
}

.toggle-switch input:checked+label {
	background-color: rgba(255, 255, 255, 0.8);
}

.toggle-switch input:checked+label:before {
	transform: translateX(20px);
}

.signin-rules {
	position: absolute;
	top: 15px;
	right: 15px;
	font-size: 14px;
}

.signin-status {
	margin-top: 20px;
	font-size: 16px;
	line-height: 1.5;
	margin-bottom: 20px;
}

.signin-button-container {
	margin-top: 10px;
	display: flex;
	justify-content: center;
	position: relative;
}

.signin-button {
	width: 160px;
	height: 160px;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 28px;
	font-weight: bold;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
	position: relative;
	overflow: hidden;
	border: 4px solid rgba(255, 255, 255, 0.3);
}

.signin-button:before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: linear-gradient(to bottom,
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, 0.3) 50%,
			rgba(255, 255, 255, 0) 100%);
	transform: rotate(30deg);
	animation: shine 3s infinite;
}

@keyframes shine {
	0% {
		transform: translateX(-100%) rotate(30deg);
	}

	100% {
		transform: translateX(100%) rotate(30deg);
	}
}

.button-text {
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.rewards-section {
	padding: 15px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	margin-top: -10px;
	position: relative;
	z-index: 10;
	box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.reward-item {
	display: flex;
	align-items: center;
	padding: 15px;
	margin-bottom: 12px;
	background-color: rgba(255, 255, 255, 0.9);
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.reward-icon {
	width: 50px;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 15px;
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 10px;
	padding: 5px;
}

.reward-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.default-icon {
	width: 50px;
	height: 50px;
	border-radius: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 24px;
}

.red-packet {
	background-color: #ff4d4f;
	color: white;
}

.points {
	background-color: #faad14;
	color: white;
}

.reward-info {
	flex: 1;
}

.reward-title {
	font-size: 16px;
	font-weight: bold;
	color: #333;
}

.reward-desc {
	font-size: 14px;
	color: #666;
}

.reward-status {
	padding: 6px 18px;
	border-radius: 18px;
	font-size: 14px;
	font-weight: 500;
}

.calendar-section {
	padding: 15px;
	background-color: white;
}

.calendar-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15px;
	font-size: 16px;
	color: #333;
}

.nav-arrow {
	cursor: pointer;
	color: #666;
}

.calendar-weekdays {
	display: flex;
	margin-bottom: 10px;
}

.weekday {
	flex: 1;
	text-align: center;
	font-size: 14px;
	color: #666;
}

.calendar-dates {
	display: flex;
	flex-direction: column;
}

.date-row {
	display: flex;
	margin-bottom: 8px;
}

.date-cell {
	flex: 1;
	height: 36px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 2px;
	border-radius: 4px;
	font-size: 14px;
	color: #666;
}

.date-cell.signed {
	border-radius: 50%;
	font-weight: bold;
	position: relative;
}

.date-cell.signed:before {
	content: '';
	position: absolute;
	width: 30px;
	height: 30px;
	border: 2px solid currentColor;
	border-radius: 50%;
	opacity: 0.3;
}
</style>